<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>闪烁点</title>
    <link rel="stylesheet" type="text/css" href="../leaflet/dist/leaflet.css">
    <script type="text/javascript" src="../leaflet/dist/leaflet.js"></script>
    <!-- 引入闪烁marker -->
    <link rel="stylesheet" type="text/css" href="css/blinkmarker.css">
    <script type="text/javascript" src="js/blinkmarker.js"></script>
    <style type="text/css">
        body {
            padding: 0;
            margin: 0;
        }

        html,
        body,
        #map {
            height: 100%;
        }
    </style>
</head>

<body>
<div id='map'></div>
</body>
<script type="text/javascript">
    /**
     * 这一部分用于加载地图,我这里用的是离线地图,需要适当修改
     */
    var url = 'http://localhost:9090/img/{z}/{x}/{y}.png';
    var map = L.map('map', {
        center: [34.694, 113.587],
        zoom: 6,
        zoomControl: false
    });
    //将图层加载到地图上，并设置最大的聚焦还有map样式
    L.tileLayer(url, {
        maxZoom: 18,
        minZoom: 3
    }).addTo(map);

    //以下是加载闪烁标记
    // 支持以下属性iconSize: 主体大小(默认15,15),color:主体颜色(默认红色),diveColor: 发散颜色(red),title: 标题,level: 闪烁的粗细(2),speedTime: 发散闪烁的速度(2)
    /**
     L.blinkMarker(LatLng,{iconSize: [50,50],color: 'green',diveColor: 'blue',title: "啦啦啦"})
     */
    L.blinkMarker([36.694, 118.587], {
        iconSize: [50, 50],
        color: 'green',
        diveColor: 'blue',
        level: '3',
        speedTime: 2,
        title: "啦啦啦" }).addTo(map);
    L.blinkMarker([34.694, 112.587], { iconSize: [12, 12], color: 'green',speedTime: 0.5}).addTo(map);
    L.blinkMarker([35.694, 113.587], { iconSize: [18, 18], diveColor: 'aqua' }).addTo(map);
    L.blinkMarker([32.694, 116.587], { iconSize: [25, 25], level: '3', speedTime: 1 }).addTo(map);
    // document.styleSheets[0].addRule('.pulse-icon::after { box-shadow:  0 0 6px 2px green }', 0);


</script>

</html>
